<template>
  <el-card :body-style="{ padding: '0px' }" class="product-card" shadow="hover">
    <div class="product-badge" v-if="product.hot">热卖</div>
    <div
      class="product-badge discount"
      v-if="product.originalPrice > product.seckillPrice"
    >
      省{{ discountAmount }}元
    </div>
    <div class="product-wrapper">
      <img :src="product.imageUrl" class="product-image" />
      <div class="hover-mask">
        <div class="hover-btns">
          <el-button
            type="primary"
            round
            icon="View"
            @click="$emit('view', product.id)"
            >查看详情</el-button
          >
        </div>
      </div>
    </div>
    <div class="product-info">
      <h3 class="product-title">{{ product.name }}</h3>
      <div class="price-info">
        <span class="current-price">¥{{ product.seckillPrice }}</span>
        <span class="original-price">¥{{ product.originalPrice }}</span>
      </div>
      <el-progress
        :percentage="product.progress"
        :format="format"
        status="exception"
        :stroke-width="12"
        class="seckill-progress"
      />
      <div class="sold-info">已抢{{ product.sold }}件</div>
      <el-button
        type="danger"
        size="large"
        class="seckill-btn"
        @click="$emit('seckill', product.id)"
        :disabled="product.stock <= 0"
      >
        {{ product.stock > 0 ? "立即抢购" : "已售罄" }}
      </el-button>
    </div>
  </el-card>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
});

defineEmits(["view", "add-cart", "seckill"]);

const discountAmount = computed(() => {
  return (props.product.originalPrice - props.product.seckillPrice).toFixed(0);
});

const format = (percentage) => {
  return `已抢${percentage}%`;
};
</script>

<style lang="scss" scoped>
::v-deep(.el-progress__text) {
  min-width: 0;
}

.product-card {
  position: relative; // 添加相对定位

  .product-badge {
    position: absolute;
    padding: 4px 8px;
    border-radius: 4px 0 0 4px;
    font-size: 12px;
    font-weight: 500;
    z-index: 1;
    color: #fff;

    &:first-child {
      top: 10px;
      right: 0px;
      background: #ff4d4f;
      box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
    }

    &.discount {
      top: 45px;
      right: 0px;
      background: #ff9900;
      box-shadow: 0 2px 4px rgba(255, 153, 0, 0.2);
    }
  }

  .product-wrapper {
    position: relative;
    overflow: hidden;

    .product-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: transform 0.3s;
    }

    .hover-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.3s;

      .hover-btns {
        display: flex;
        flex-direction: column;
        gap: 10px;
        transform: translateY(20px);
        transition: transform 0.3s;

        .el-button {
          padding: 12px 24px;

          i {
            margin-right: 4px;
          }
        }
      }
    }

    &:hover {
      .product-image {
        transform: scale(1.1);
      }

      .hover-mask {
        opacity: 1;

        .hover-btns {
          transform: translateY(0);
        }
      }
    }
  }

  .product-info {
    padding: 15px;

    .product-title {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
      height: 44px;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price-info {
      display: flex;
      align-items: baseline;
      margin: 10px 0;

      .current-price {
        color: #ff4d4f;
        font-size: 24px;
        font-weight: bold;
        margin-right: 8px;
      }

      .original-price {
        color: #999;
        text-decoration: line-through;
        font-size: 14px;
      }
    }

    .seckill-progress {
      margin: 15px 0;

      :deep(.el-progress-bar__outer) {
        border-radius: 10px;
      }

      :deep(.el-progress-bar__inner) {
        border-radius: 10px;
        background: linear-gradient(90deg, #ff4d4f, #ff9900);
      }
    }

    .sold-info {
      font-size: 12px;
      color: #666;
      margin-bottom: 10px;
    }

    .seckill-btn {
      width: 100%;
      border-radius: 20px;
      font-size: 16px;

      &:disabled {
        background: #ccc;
        border-color: #ccc;
      }
    }
  }
}
</style>
